<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
		<link rel="stylesheet" type="text/css" href="public/css/style.css" media="screen" />
		<title>eGallery - Upload</title>
		<script type="text/javascript" src="public/js/fquery.js"></script>
		<script type="text/javascript">
			
			var validator = {
				'description' : {
					'regex' : /.{5,}/,
					'message' : 'Deskripsi minimum 5 karakter'
				},
				'keyword' : {
					'regex' : /.{3,}/,
					'message' : 'Kata kunci minimal 3 karakter'
				},
				'date' : {
					'regex' : /^\d{4}\-\d{2}\-\d{2}$/,
					'message' : 'Format YYYY-MM-DD'
				},
				'pic' : {
					'regex' : /^.*\.(bmp|jpeg|jpg|gif|png)$/,
					'message' : 'Tipe gambar: bmp, jpeg, jpg, gif, png'
				}
			}
			
			
			var form;
		
			function init() {
				//alert(document.getElementById("content").getAttribute('class'));
				form = document.forms["uploadForm"];
				calendar("datepicker", "uploadForm", "date");
				validate('uploadForm' , validator);
			}
			
			/*function validateField(name) {
				if (!validator[name]['regex'].test(form[name].value)) {
					//alert(form[name].parentNode.parentNode.childNodes.length);
					if (form[name].parentNode.parentNode.childNodes.length == 5) {
						var element = document.createElement('span');
						element.setAttribute('class' , 'error');
						element.innerHTML = validator[name]['message'];
						form[name].parentNode.parentNode.appendChild(element);
					}
					return false;
				}
				else {
					if (form[name].parentNode.parentNode.childNodes.length > 5) {
						//alert("OK");
						form[name].parentNode.parentNode.removeChild(form[name].parentNode.parentNode.lastChild);
					}
					return true;
				}
			}
			
			function validateForm() {
				var retval = true;
				for (var index in validator) {
					//form[index].parentNode.parentNode.removeChild(form[index].parentNode.parentNode.lastChild);
					validateField(index , '');
				}
				return false;
			}*/
			
			function reloadCSS() {
				var links = document.getElementsByTagName("link");
				for (var i in links) {
					if (links[i].getAttribute('href') == "public/css/style.css") {
						links[i].setAttribute('href' , 'public/css/style2.css');
					}
					else
						links[i].setAttribute('href' , 'public/css/style.css');
					//alert("OK");
				}
				return false;
			}
			
		</script>
	</head> 
	<body onload="init()"> 
		<div id="bodyWrapper"> 
			<div id="header"> 
				<ul id="accountBar"> 
					<li><a href="#" onclick="return reloadCSS()">Switch CSS</a></li> 
					<li><a href="">Logout</a></li> 
				</ul> 
			</div> 
			<div class="dummy"></div> 
			<ul id="pgmenu"> 
				<li> 
					<a href="register.html">Daftar</a> 
				</li> 
				<li> 
					<a href="upload.html">Upload</a>
				</li> 
				<li> 
					<a href="gallery.html">Galeri</a>
				</li> 
			</ul> 
			<br style="clear: both;" /> 
		
			<div id="content">
				<h2>Unggah Foto</h2>
				<form id="uploadForm" method="post" action="register.php" enctype="multipart/form-data" onsubmit="return validateForm()">
					<div class="dtable">
						<div class="drow">
							<span class="shead"><label for="pic">Foto</label></span>
							<span><input type="file" id="pic" name="pic" /></span>
						</div>
						<div class="drow">
							<span class="shead"><label for="description">Deskripsi</label></span>
							<span><input type="text" id="description" name="description" /></span>
						</div>
						<div class="drow">
							<span class="shead"><label for="keyword">Kata kunci</label></span>
							<span><input type="text" id="keyword" name="keyword" /></span>
						</div>
						<div class="drow">
							<span class="shead"><label for="date">Tanggal Foto</label></span>
							<span>
								<input type="text" id="date" name="date" />
								<a href="#"><img onclick="toggleCalendar(this); return false;" class="dp-choose-date" alt="date" src="public/img/calendar.png" title="Pilih Tanggal" /></a>
								<span class="dummy"></span>
							</span>
						</div>
						<div class="drow">
							<span class="shead"><input type="submit" value="Unggah" /></span>
						</div>
					</div>
				</form>
			</div>
		</div>
            <div id="datepicker"></div>
		<script src="public/js/calendar.js" type="text/javascript"></script>
	</body>

</html>